.page-item-transition {
  transition: transform 500ms, opacity 500ms;
}

.page-item-enter {
  opacity: 0;
  transform: translateX(100%);
}

.page-item-enter-active {
  opacity: 1;
  transform: translateX(0%);
  .page-item-transition();
}

.page-item-enter-done {
  opacity: 1;
  transform: translateX(0%);
}

.page-item-exit {
  opacity: 1;
  transform: translateX(0%);
}

.page-item-exit-active {
  opacity: 0;
  transform: translateX(100%);
  .page-item-transition();
}

.page-item-exit-active-done {
  opacity: 0;
  transform: translateX(100%);
}